<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	*{ 
		padding:0; 
		margin:0; 
		list-style:none;
		}
	.tab{ 
		width:300px; 
		height:300px; 
		border:1px solid #fff; 
		margin:100px auto;
		position: relative;
		}
	.tab input{ 
		width:100px; 
		float:left; 
		height:30px;
		background: #fff;
		}
	.tab .active{ 
		background:yellow; 
		color:#fff;
		}
	.tab li{ 
		width:300px; 
		height:270px; 
		background:yellow; 
		font-size:100px; 
		text-align:center; 
		line-height:270px; 
		color:#fff; 
		display:none;
		}
	.tab .show{ 
		display:block;
		}
	.tab section{ 
		overflow:hidden;
		}
	p{
			width: 35px;
			height: 35px;
			background: yellow; 
		    color: #fff;
		    float: left;
		    margin-right: 15px;
		    border-radius: 50%;
		    text-align: center;
		    line-height: 35px;
		    font-size: 30px;
		}
	#tab3:after{
		display: block;
		clear: both;
		content: "";
	}
		
</style>
<script src="bundle.js"></script>

</head>

<body>
	<div class="tab" id="tab">
    	<section class="btnBox">
        	<input class="active" type="button" value="1" />
            <input type="button" value="2" />
            <input type="button" value="3" />
        </section>
        <ul>
        	<li class="show">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    
    <div class="tab" id="tab2">
    	<section class="btnBox">
        	<input class="active" type="button" value="1" />
            <input type="button" value="2" />
            <input type="button" value="3" />
        </section>
        <ul>
        	<li class="show">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>


    <div class="tab" id="tab3">
    	
    	<section class="btnBox">
        	<input class="active" type="button" value="1" />
            <input type="button" value="2" />
            <input type="button" value="3" />
        </section>
        
        <ul>
        	<li class="show">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <p class="left"><</p>
        <p class="right">></p>
    </div>
</body>
</html>











